<template>
  <div>
    <el-button @click="request">请求天气</el-button>
    <div v-if="weatherInfo" style="margin-top: 20px;">
      <p>城市：{{ weatherInfo.province }} {{ weatherInfo.city }}（{{ weatherInfo.district }}）</p>
      <p>天气：{{ weatherInfo.weather }}</p>
      <p>温度：{{ weatherInfo.temperature }}°C</p>
      <p>湿度：{{ weatherInfo.humidity }}%</p>
      <p>风向：{{ weatherInfo.windDirection }}</p>
      <p>风力：{{ weatherInfo.windPower }}级</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import axios from "axios";

const weatherInfo = ref<null | {
  province: string
  city: string
  district: string
  weather: string
  temperature: string
  humidity: string
  windDirection: string
  windPower: string
}>(null)

const request = async () => {
  try {
    const res = await axios.get('https://restapi.amap.com/v3/weather/weatherInfo?city=350900&key=d55c45eac3ce1bd46ecd88e2a6a35baa')
    const data = res.data.lives[0]
    weatherInfo.value = {
      province: data.province,
      city: data.city,
      district: data.adcode,
      weather: data.weather,
      temperature: data.temperature,
      humidity: data.humidity,
      windDirection: data.winddirection,
      windPower: data.windpower
    }
    console.log('天气数据获取成功：', weatherInfo.value)
  } catch (err) {
    console.error('请求失败：', err)
  }
}

</script>

<style scoped>
button {
  margin-top: 10px;
  padding: 6px 16px;
  font-size: 14px;
  cursor: pointer;
}
</style>